<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" style="box-shadow: 0 0 10 #000;"></canvas>
  <img src="../asset/img/background.png" style="display: none;" alt="">
</body>

</html>

<script>
  var canvas = document.getElementById('canvas')
  var ctx = canvas.getContext('2d')

  canvas.width = 320
  canvas.height = 568

  var img = new Image()
  img.src = '../asset/img/background.png'

  class Bg {
    constructor(imgObj) {
      this.imgObj = imgObj
    }

    drawImg(x, y, width, height) {
      ctx.drawImage(this.imgObj, x, y, width, height)
    }
  }

  var initImg = new Bg(img)
  var Y = 0
  function move() {
    ctx.save()

    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.translate(0, -Y)
    initImg.drawImg(0, 0, canvas.width, canvas.height)
    initImg.drawImg(0, canvas.height, canvas.width, canvas.height)

    Y++
    if (Y > canvas.height) {
      Y = 0
    }
    ctx.restore()
    window.requestAnimationFrame(move)
  }


  img.onload = function () {

    move()
  }
</script>